
body{
    margin: 0; /*外边距*/
    padding: 0; /*内边距*/
    background-color: rgb(0, 0, 0); /*背景颜色*/
  }
  a{
    position: absolute; /*绝对对位*/
    top: 50%; /*距上部*/
    left: 50%; 
    transform: translate(-50%,-50%); /*移动，根据X,Y轴*/
    width: 200px; /*宽*/
    height: 60px; /*高*/
    text-align: center; /*字体水平居中*/
    font-size: 16px; /*字体大小*/
    line-height: 60px; /*行高*/
    color: rgb(255, 255, 255);
    text-transform: uppercase; /*字体大写*/
    text-decoration: none; /*字体增加装饰：去除下划线*/
    font-family: sans-serif; /*非衬线体*/
    box-sizing: border-box; /*盒模型大小规则*/
    background: linear-gradient(
      90deg,#03a9f4, #f441a5, #ffeb3b, 
    #03a9f4, #f441a5, #ffeb3b, #03a9f4); /*渐变背景*/
    border-radius: 60px; /*边框圆角*/
    background-size: 400%; /*背景大小*/
    z-index: 1; /*层叠定位*/
  }
  a:hover{
    animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
  }
  @keyframes animate{
    0%{
      background-position: 0%; /*修改背景定位，实现渐变色炫光*/
    }
    50%{
      background-position: 100%;
    }
    100%{
      background-position: 0%;
    }
  }
  a::before{ /*之前添加*/
    content: ''; /*内容*/
    position: absolute; /*绝对定位*/
    top:-5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
    left: -5px;
    right: -5px;
    bottom: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
    z-index: -1; 
    background: linear-gradient(
      90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, 
    #f441a5, #ffeb3b, #03a9f4);
    border-radius: 40px;
    background-size: 400%;
    filter: blur(20px); /*过渡：模糊*/
    opacity: 0; /*透明度*/
    transition: 1s; /*过渡时间*/
  }
  a:hover::before{
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite; /*注意动画名称统一*/
  }